/*
* © 2010 Autodata Solutions Company. All Rights Reserved
* This source code is the confidential and proprietary information of Autodata Solutions Company.
* The user shall not, in whole or in part, copy, publish, disclose or make any use of this source code
* without the prior written consent of Autodata Solutions Company.
*/
Ext.ns('net.autodata.compare.photos');
(function() {
    var DQ = Ext.DomQuery;

    /**
    * @class VehiclePhotosView
    * @extends net.autodata.AbstractView
    * @namespace net.autodata.compare.photos
    */
    var View = Ext.extend(net.autodata.AbstractView, {

        templates: undefined,

        baseVehicleWidth: 197,
        competitorWidth: 197,

        viewCls: '',

        photoPanels: undefined,

        constructor: function() {
            View.superclass.ctor.apply(this, arguments);
        },

        init: function() {
            View.superclass.init.apply(this, arguments);
            this.component.relayEvents(this, ['viewlarger']);
        },

        initTemplates: function() {
            var ts = this.templates || {};

            if (!ts.mainTpl) {
                ts.mainTpl = new Ext.Template(
					'<div class="vehiclephotos-view {viewCls}">',
						'<table border="0" cellpadding="0" cellspacing="0">',
							'<tr>',
								'<td class="basevehicle" style="width:{baseVehicleWidth}px;"><div class="basevehicle-wrap"></div></td>',
								'<td class="competitor competitor1" style="width:{competitorWidth}px;"><div class="competitor1-wrap"></div></td>',
								'<td class="competitor competitor2" style="width:{competitorWidth}px;"><div class="competitor2-wrap"></div></td>',
								'<td class="competitor competitor3" style="width:{competitorWidth}px;"><div class="competitor3-wrap"></div></td>',
							'</tr>',
						'</table>',
					'</div>',
					{
					    compiled: true,
					    disableFormats: true
					}
				);
            }

            this.templates = ts;
        },

        getTemplateArgs: function() {
            return {
                viewCls: this.viewCls || '',
                baseVehicleWidth: this.baseVehicleWidth,
                competitorWidth: this.competitorWidth
            }
        },

        render: function() {
            var panel = this.component;
            var dom = panel.el.dom;

            this.templates.mainTpl.overwrite(dom, this.getTemplateArgs());

            //Create 4 vehicle panels
            var photoPanels = [this.createPanel(
				DQ.selectNode('.basevehicle-wrap', dom),
			    this.baseVehicleWidth
			)];

            for (var i = 1; i < 4; i++) {
                photoPanels.push(this.createPanel(
					DQ.selectNode(String.format('.competitor{0}-wrap', i), dom),
					this.competitorWidth
				));
            }

            this.photoPanels = photoPanels;
        },

        refresh: function() {
            var store = this.component.getStore();
            store.each(function(record, index) {
                var pp = this.photoPanels[index];
                if (!record.phantom) {
                    pp.el.set({
                        'acode': record.get('acode'),
                        'shotId': record.get('shotId'),
                        'imageType': record.get('imageType')
                    }, true),
					pp.setIOFImageName(record.get('imageName'));
                    //pp.show();
                    pp.enable();
                } else {
                	pp.setIOFImageName(undefined);
                    //pp.hide();
                	pp.disable();
                }
            }, this);
        },

        /**
        * @private
        */
        createPanel: function(renderTo, width, index) {
            var panel = new net.autodata.compare.photos.VehiclePhotoPanel({
                width: width,
                hideMode: 'display',
                hidden: false,
                renderTo: renderTo,
                listeners: {
                    'click': this.onViewLarger,
                    scope: this
                }
            });

            return panel;
        },

        onViewLarger: function(panel, e) {
            if (!e.getTarget('span.clickable') && !e.getTarget('.iof-image')) {
                return;
            }

            var acode = panel.el.getAttribute('acode');
            var shotId = panel.el.getAttribute('shotId');
            var imageType = panel.el.getAttribute('imageType');
            if (!acode || !shotId || !imageType) {
                return;
            }

            this.fireEvent('viewlarger', acode, shotId, imageType);
        }

    });

    net.autodata.compare.photos.VehiclePhotosView = View;

})();